<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

        <style media="screen">
            body {
                margin: 0;
                padding: 0;
                text-align: center;
            }
            h1 {
                font-weight: 400;
                height: 5%;
            }
            #canvas {
                height: 480px;
                margin: 0 auto;
                text-align: left;
                width: 640px;
            }
            #code {
                font-family: Consolas, Monaco, "Lucida Console", monospace;
                height: 4em;
                margin: 10px;
                padding: 0;
                width: 90%;
            }
            #run {
                font-size: 2em;
            }
        </style>
<script type="text/javascript" src="/js/raphael-min.js"></script>
<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>

<script type="text/javascript">


window.onload = function () {
//     var paper = Raphael("canvas", 640, 480),
//         btn = document.getElementById("run"),
//         cd = document.getElementById("code");

//     (btn.onclick = function () {
//         paper.clear();
//         paper.rect(0, 0, 640, 480, 10).attr({fill: "#fff", stroke: "none"});
//         try {
//             (new Function("paper", "window", "document", cd.value)).call(paper, paper);
//         } catch (e) {
//             alert(e.message || e);
//         }
//     })();


	 
	// Creates canvas 320 × 200 at 10, 50
	var paper = Raphael("canvas", 640, 480);

	// Creates circle at x = 50, y = 40, with radius 10
	var circle = paper.circle(50, 40, 10);

	// Sets the fill attribute of the circle to red (#f00)
	circle.attr("fill", "#f00");

	// Sets the stroke attribute of the circle to white
	circle.attr("stroke", "#fff");
	
	var polyon = "M10 10L20 10L50 30L10 50L10 10";
    var comb = paper.path(polyon).attr({fill:"rgb(255,255,193)"});
    
    comb.mouseover(function(event){
        this.attr({fill:"rgb(255,128,64)"});
    });
    comb.mouseout(function(event){
        this.animate({fill:"rgb(255,255,193)"},500);
    });
};


// http://blog.furiousbob.com/2011/01/31/having-fun-with-javascript-and-raphael/
var paper;
$(document).ready(function() {
paper = Raphael("cnv",640,480);
$("#drawbtn").click(function(){
var data = new Object;
var inner = ($("#circle:checked").val() == undefined) ? false : true;
data.x = parseInt($("#x").val());
data.y = parseInt($("#y").val());
data.r = parseInt($("#radius").val());
data.n = parseInt($("#faces").val());
data.s=0;
shape(data,inner);
});
$("#clearbtn").click(function(){
clear();
});
});
function shape(data,innerCircle) {
var points = new Array();
            for (var i = 0; i < data.n; i++) {
                var point = new Object;
                var angle = data.s + (i * (1 / data.n) * 2 * Math.PI);
                point.x = Math.round(data.x + (data.r * Math.cos(angle)));
                point.y = Math.round(data.y + (data.r * Math.sin(angle)));
                points.push(point);
            }
            var strp = "M" + points[0].x + " " + points[0].y;
            for (var i = 1; i < data.n; i++) {
                strp += "L" + points[i].x + " " + points[i].y;
            }
            strp += "L" + points[0].x + " " + points[0].y;
            var comb = paper.path(strp).attr({fill:"rgb(255,255,193)"});
            comb.mouseover(function(event){
                this.attr({fill:"rgb(255,128,64)"});
            });
            comb.mouseout(function(event){
                this.animate({fill:"rgb(255,255,193)"},500);
            });
            if(innerCircle){
             paper.circle(data.x,data.y,data.r).attr
            }
            points = new Array();
        }
function clear(){
    var paperDom = paper.canvas;
    paperDom.parentNode.removeChild(paperDom);
    paper = Raphael("cnv",640,480);
}

</script>

</head>
<body>

        <h1>Raphaël Playground</h1>
        <div id="canvas"></div>
        <div><textarea id="code">paper.circle(320, 240, 60).animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000);</textarea></div>
        <div><button id="run" type="button">Run</button></div>
        <p id="copy">Demo of <a href="http://raphaeljs.com/">Raphaël</a>—JavaScript Vector Library</p>
	<button onclick="">시작</button>
</body>
</html>